<template>
  <div class="date-picker-container">
    <el-date-picker
      v-model="date"
      :picker-options="pickerOptions"
      :default-time="['00:00:00', '23:59:59']"
      v-bind="$attrs"
      :type="type"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="onChange"
      v-on="$listeners"
    />
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  props: {
    value: {
      type: Array,
      default: null
    },
    type: {
      type: String,
      default: 'daterange'
    }
  },
  data() {
    return {
      date: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = this.getDayEnd()
            const start = this.getDayStart()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = this.getDayEnd()
            const start = this.getDayStart()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = this.getDayEnd()
            const start = this.getDayStart()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年',
          onClick(picker) {
            const end = this.getDayEnd()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本周(工作日)',
          onClick(picker) {
            var now = new Date() // 当前日期
            var nowDayOfWeek = now.getDay() // 今天本周的第几天
            var nowDay = now.getDate() // 当前日
            var nowMonth = now.getMonth() // 当前月
            var nowYear = now.getFullYear() // 当前年
            const end = new Date(nowYear, nowMonth, nowDay + (5 - nowDayOfWeek))
            const start = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = this.getDayEnd()
            const start = this.getDayStart()
            start.setDate(1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今天',
          onClick(picker) {
            const end = this.getDayEnd()
            const start = this.getDayStart()
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '去年',
          onClick(picker) {
            const end = new Date(new Date().getFullYear() - 1, 11, 31)
            const start = new Date(new Date().getFullYear() - 1, 0)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    date(val) {
      console.log(val)
      this.$emit('update:value', val)
    }
  },
  created() {
    this.date = this.$attrs['default-value']
  },
  methods: {
    onChange(val) {
    }
  }
}
</script>

<style scoped>

</style>
